/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

/*Fonts*/
@font-face {
  font-family: openSansRegular;
  src: url('fonts/OpenSans-Regular.ttf');
}

@font-face {
  font-family: openSansLight;
  src: url('fonts/OpenSans-Light.ttf');
}

@font-face {
  font-family: openSansBold;
  src: url('fonts/OpenSans-Bold.ttf');
}

@default-font: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;

// Size of the buttons (they're square):
@button-size: 40px;
@avatar-size: 32px;
// Note: this is also in ui.js, BUTTON_HEIGHT
// Height of the draggable anchor at the top:
@anchor-height: @button-size / 2;
// Extra padding on the edge of the screen:
@side-padding: 0;
// Background color of most elements:
@background-color: #0095DD;
@window-background-color: #ffffff;
@window-color: #000;
@text-color: #000;

// This is the base z-index of the buttons; items you want below or above
// this can be @z-index+1, etc.
@z-index: 10000;

@import "reset.less";
@import "functions.less";

.togetherjs {

  /* General styles */
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 20px;
  color: rgb(51, 51, 51);
  font-weight: normal;

  a {
    color: #0095DD;
    text-decoration: none;
  }

  a:hover {
    color: #0095DD;
    text-decoration: underline;
  }

  p {
    margin: 7px 0 7px 0;
  }

  button, img {
    vertical-align: middle;
  }

  input:focus {
    outline: none;
  }

  button::-moz-focus-inner, input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
    padding: 0;
    border: 0;
  }

  .togetherjs-right {
    float:right;
  }

}


.button-style () {
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  // FIXME: for some reason this effects the total space of a <a
  // class="togetherjs-primary/etc"> but not a <button
  // class="togetherjs-primary/etc"> :
  //padding: 3px 10px 3px;
  height: 40px;
  /*line-height not consistent across browsers*/
  line-height: 37px;
  text-decoration: none;
  min-width: 100px;
  border: none;
  font-family: @default-font;
  /*transition: all 0.25s linear 0s;*/
  text-shadow: none;
  margin:3px;
  font-size:14px;
}

button:disabled {
  opacity:0.2;
}

button[disabled]:hover {
  background:#0194DB;
}

.togetherjs-default {
  .button-style;
  background:#9A9A9A;
  color: #fff;
  &.togetherjs-follow {
    cursor: pointer;
  }

  &:hover {
    background:#ADADAD;
  }
}

.togetherjs-primary {
  .button-style;
  background:#0194DB;
  color: #fff;
  &.togetherjs-follow {
    cursor: pointer;
  }

  &:hover {
    background:#00ACFF;
  }
}

a.togetherjs-primary, a.togetherjs-default, a.togetherjs-secondary {
  &, &:link, &:active, &:visited, &:hover {
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
  }
}

#togetherjs-avatar-edit .togetherjs-person-avatar-swatch {
  margin-left: 22px;
}

#togetherjs-avatar-edit .togetherjs-person {
  float: left;
  height: 36px;
  width: 36px;
  margin: 35px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: -2px -1px;
  border: 2px solid;
  border-radius: 2px;
  background-clip: border-box;
}

#togetherjs-avatar-edit #togetherjs-avatar-buttons {
  float:right;
  width:172px;
  padding:45px 0px;
}

input.togetherjs-upload-avatar {
  line-height: 0px;
  width: 174px;
  margin-left:-20px;
}

#togetherjs-upload-avatar {
  float:left;
}

#togetherjs-camera-avatar {
  clear:both;
}

#togetherjs-avatar-edit .togetherjs-buttons {
  clear:both;
}


.togetherjs-destructive {
  .button-style;
  background:#AC2924;
  color: #ffffff;

  &:hover {
    background: rgba(212,6,6,1);
  }

}

.togetherjs-secondary {
  .button-style;
  .gradient(#999999, #888888);
  color: #fff;
}

.togetherjs-cancel {
  display: inline-block;
  background-color: @background-color;
  border: none;
  padding:3px 0px;
  margin:0px 0px 0px;
  min-width: 0;
  font-size:14px;
  color:#333333;
  font-family: openSansLight, Helvetica;
  vertical-align:-2px !important;
  &:hover {
    cursor: pointer;
    border-bottom:1px solid #BCBCBC;
    margin:0px 0px -1px;
  }

}

.togetherjs-alt-text {
  vertical-align:-2px;
}


.window() {
  // top/left is set in code
  position: fixed;
  background-color: @window-background-color;
  color: @window-color;
  padding: 0 7px 0 7px;
  z-index: @z-index + 1;


  section {
    margin: 15px 7px;
  }

  & > header {
    font-weight: bold;
    font-variant: normal;
    text-align: center;
    font-family: openSansRegular, Helvetica;
    color: #fff;
    margin: 0 -7px 0 -7px;
    padding: 10px 4px 5px 30px;
    height: (@button-size + 8)/2;
    background: #0095DD;
    border-radius: 4px 4px 0 0;
    position: relative;
    border-bottom:1px solid #0071A7;
  }

  .togetherjs-share-link {
    width: 256px;
    font-size: 12px;
    padding: 6px 6px 4px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
    font-family: Monaco, sans-serif;
    margin: 7px 0px;
    &:focus {
      border:1px solid #0095DD;
    }
  }

  header button.togetherjs-close {
    .button-reset;
    border-left:1px solid #0071A7;
    float: right;
    font-weight: bold;
    cursor: pointer;
    background-color: @background-color;
    background-image: url('./images/icon-close@2x.png');
    background-position:center center;
    background-repeat: no-repeat;
    background-size:13px 13px;
    width:39px;
    height:39px;
    margin-top:-10px;
    margin-right:-4px;
    border-top-right-radius:4px;
    &:hover {
      background-image:url('./images/icon-close-active.png');
      background-color:rgba(0,0,0,0.1);
    }
  }

  #togetherjs-chat-messages {
    overflow-y: auto;
    /*FIXME: I'm just pulling numbers out of thin air here:*/
    height: 260px;
  }

} // End of .window()

/*FIX ME something weird is going on here. the avatar has no paddingTop only on Safari*/
/*button#togetherjs-profile-button.togetherjs-button {
  padding:10px 0px !important;
}*/

/* General dock rules: */

.togetherjs {

  // The dock buttons
  #togetherjs-buttons .togetherjs-button {
    .button-reset;
    position: relative;
    width: @button-size+20;
    height: @button-size+20;
    background-color: @background-color;
    background-size: @button-size @button-size;
    background-repeat: no-repeat;
    background-position: center;
    border-top:1px solid rgba(0,0,0,0.2);
    &:hover {
      background-color: #0F81BF;
    }
  }

  #togetherjs-buttons hr {
    padding: 0;
    margin: 0;
  }

  #togetherjs-dock-participants button.togetherjs-active {
    background-color: #0F81BF !important;
  }

  #togetherjs-buttons #togetherjs-share-button {
    background-image: url('./images/button-share.png');
    &:hover {
      background-image: url('./images/button-share-active.png');
    }
  }

  #togetherjs-buttons #togetherjs-share-button.togetherjs-active {
    background-image: url('./images/button-share-active.png') !important;
    background-color: #0F81BF;
  }

  #togetherjs-buttons #togetherjs-audio-button{
    background-image: url('./images/button-mic.png');
    &:hover {
      background-image: url('./images/button-mic-active.png');
      /*background-color:#0095dd;*/
      /*cursor: default;*/
    }
  }

  #togetherjs-buttons #togetherjs-audio-button.togetherjs-active {
    background-image: url('./images/button-mic-active.png') !important;
    background-color: #0F81BF;
  }

  #togetherjs-buttons #togetherjs-chat-button{
    background-image: url('./images/button-chat.png');
    &:hover {
      background-image: url('./images/button-chat-active.png');
    }
  }

  #togetherjs-buttons #togetherjs-chat-button.togetherjs-active {
    background-image: url('./images/button-chat-active.png') !important;
    background-color: #0F81BF;
  }

  #togetherjs-dock-anchor {
    height: @anchor-height;
    text-align: center;
    /* FIXME: disabling dock movement for now, cursor would be misleading: */
    //cursor: move;
    .user-select(none);
    width: 100%;
    position: relative;
    left: 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  .togetherjs-subtitle {
    background:#0195DD;
    width:280px;
    height:17px;
    border-bottom:1px solid #0071A7;
    color: rgba(255,255,255,0.5);
    font-size:12px;
    padding:7px 10px;
    left:-14px;
    top:-15px;
    position:relative;
  }

  .togetherjs-subtitle #togetherjs-chat-participants {
    font-size:12px;
    color:rgba(255,255,255,0.5);
  }

  .togetherjs-subtitle #togetherjs-chat-no-participants {
    font-size:12px;
    color:rgba(255,255,255,0.5);
  }

  .togetherjs-subtitle #togetherjs-chat-participant-list {
    font-size:12px;
    color:rgba(255,255,255,0.5);
  }


  #togetherjs-chat-input {
    width: 264px;
    height: 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    resize: none;
    font-size: 14px;
    padding: 4px 6px 5px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    /*box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);*/
    font-family: openSansLight, Helvetica, sans-serif;
    &:focus {
      border:1px solid #0095DD;
    }
  }

  #togetherjs-chat-input-box {
    margin: 0;
    padding: 10px 10px 11px;
    border-top: 1px solid rgba(0,0,0,0.1);
    background:#F2F2F2;
    position: relative;
    /*box-shadow: 0 -1px 2px rgba(0,0,0,0.1);*/
    height: 31px;
    width: 280px;
    margin-left:-7px;
    border-bottom-right-radius:4px;
    border-bottom-left-radius:4px;
  }

  .togetherjs-window #togetherjs-chat-messages {
    width: 300px;
    position: relative;
    left: -14px;
    background: #fff;
    top:-30px;
    margin-bottom:-30px !important;
  }

  .togetherjs-chat-item {
    padding: 0 0 20px 0;
    font-family: @default-font;
    font-size: 14px;
    padding: 10px 0px;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    color:rgba(51,51,51,1);
    min-height: 60px;
  }

  #togetherjs-chat-messages .togetherjs-chat-item a.togetherjs-person-url {
    width: 105px;
    white-space: nowrap;
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #togetherjs-chat-messages .togetherjs-person-self {
    float:left;
    margin-bottom:20px;
    margin-top:7px;
  }

  #togetherjs-chat-messages .togetherjs-person {
    float:left;
    margin-bottom:20px;
  }

  .togetherjs-person-name-abbrev {
    color:rgba(51,51,51,1);
    font-family:openSansRegular, Helvetica, sans-serif;
    padding-top: 2px;
  }

  .togetherjs-timestamp {
    float: right;
    color:rgba(51,51,51,0.5);
    font-size: 9px !important;
    padding: 0 15px;
  }

  .togetherjs-chat-content {
    white-space: pre-wrap;
    line-height: 20px;
    font-family: @default-font;
    margin: 3px 15px 3px 60px;
  }

  #togetherjs-window-pointer-right, #togetherjs-window-pointer-left {
    position: fixed;
    width: 10px;
    height: 10px;
    margin-right: -5px;
    margin-top: -5px;
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    z-index: @z-index + 2;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
  }
  #togetherjs-window-pointer-right {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  #togetherjs-window-pointer-left {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }

  .togetherjs-window {
    .window;
    width: 286px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }

  // FIXME: why the override?

  #togetherjs-feedback-form > header {
    font-weight: bold;
    font-variant: normal;
    text-align: center;
    font-family: openSansRegular, Helvetica, sans-serif;
    color: #fff;
    margin: 0 -1px 0 -1px;
    padding: 10px 4px 5px 30px;
    height: 24px;
    background: #0095DD;
    border-radius: 4px 4px 0 0;
    position: relative;
    border-bottom: 1px solid #0071A7;
  }

  #togetherjs-feedback-form.togetherjs-modal {
    background-color: #fff;
    color: #000000;
    padding: 0 0 5px 0;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
    border-bottom: 1px solid #c9c9c9;
    position: fixed;
    top: 46%;
    left: 47%;
    margin-left: -150px;
    margin-top: -10em;
    height: 24em;
    width:399px;
  }

  #togetherjs-alpha-intro .togetherjs-small-feedback-txt {
    font-size: 10px;
  }

  #togetherjs-alpha-intro .togetherjs-modal-close:hover {
    background: #61921b;
  }

  #togetherjs-alpha-intro {
    height: 24em;
  }

  #togetherjs-intro .togetherjs-modal-dont-join {
/*    background-repeat: repeat-x;
    border: 0;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    text-transform: none;
    vertical-align: middle;
    padding: 10px 0 10px 0;*/
  }

  .togetherjs-notification {
    .window;
    width: 300px;
    border-radius: 4px;
    background: rgba(242,242,242,0.9);
    border: 1px solid #BCBCBC;
    -moz-box-shadow:    0px 5px 15px 0px rgba(0,0,0,0.40), inset 0px 3px 1px 0px #FFFFFF;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.40), inset 0px 3px 1px 0px #FFFFFF;
    box-shadow:         0px 5px 15px 0px rgba(0,0,0,0.40), inset 0px 3px 1px 0px #FFFFFF;
    &:hover {
      background: rgba(242,242,242,1);
      cursor:pointer;
    }
  }

  .togetherjs-notification .togetherjs-chat-item {
    border-bottom:0px;
    word-wrap: break-word;
  }

  .togetherjs-notification section#togetherjs-chat-notifier-message {
    margin:0px !important;
  }

  .togetherjs-notification .togetherjs-chat-content {
    font-size:12px;
  }

  .togetherjs-notification section {
    font-size:12px;
  }

  .togetherjs-notification .togetherjs-person-name {
    font-family: openSansRegular, Helvetica Bold, 'Helvetica Neue', Arial;
    font-size:14px;
  }

  .togetherjs-notification button {
    min-width:47% !important;
  }

  .togetherjs-notification .togetherjs-person {
    display:none;
  }

  .togetherjs-notification .togetherjs-timestamp {
    display:none;
  }

  .togetherjs-notification {
    border-bottom:0px;
  }

  .togetherjs-notification img.togetherjs-notification-logo {
    float: left;
    margin: 22px 14px 14px 10px;
    width: 34px;
    height: 25px;
  }

  .togetherjs-notification img.togetherjs-notification-closebtn{
    float:right;
    padding: 14px 7px;

    &:hover{
      opacity:0.5;
    }
  }

  .togetherjs-notification section.togetherjs-buttons {
    border-top:1px solid #E1E1E1;
  }

  .togetherjs-person {
    height: @avatar-size + 4;
    width: @avatar-size + 4;
    margin:(@button-size/5) + 2;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    background-position: -2px -2px;
    border: 2px solid;
    border-radius: 2px;
    background-clip: border-box;
    &.togetherjs-person-small {
      display: inline-block;
      @height: (@button-size + 8px) / 2 - 9px;
      height: @height + 5;
      width: @height + 5;
      margin: -1px -18px;
      background-size: (@height + 7) (@height + 7);
      background-position: -1px -1px;
    }
  }

  .togetherjs-person-small .togetherjs-person-avatar-swatch {
    border-width: 3px;
    margin-left: 14px;
    margin-top: 0px;
  }

  .togetherjs-person-avatar-swatch {
    /* This is the element that lives inside all .togetherjs-person elements
       and is used for the triangle. */
    @size: 7px;
    width: 0;
    height: 0;
    margin-left: @avatar-size - @size - 2px;
    padding: 0;
    border-top: @size solid transparent;
    border-left: @size solid transparent;
    border-right: @size solid transparent;
    border-bottom: @size solid transparent;
    margin-top: 0px;
  }

  .togetherjs-person-inactive {
    opacity: 0.5;
  }

  // causes a problem on FF
  .togetherjs-button .togetherjs-person {
    // A hack of sorts, because we don't want any top or bottom margin when the avatar
    // is inside a dock button (but we do want the left margin);
    margin: 0 0 0 10px;
  }

  @-moz-document url-prefix() {
      /* firefox only styles */
      .togetherjs-button .togetherjs-person {
        margin: 10px 0 0 10px;
      }
  }

  // Only applies to the participant-detail screen, really?
  header .togetherjs-person {
    float: left;
  }

  .togetherjs-dock-person > .togetherjs-dock-person-tooltip {
    display: none;
  }
  .togetherjs-dock-person:hover > .togetherjs-dock-person-tooltip {
    display: block;
  }
  .togetherjs-dock-person.togetherjs-active:hover > .togetherjs-dock-person-tooltip {
    display: none;
  }

  .togetherjs-dock-person-tooltip {
    font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial;
    position: absolute;
    right: 70px;
    top: 0px;
    padding: 8px;
    font-size:12px;
    text-align:left;
    min-width:30px;
  }

  .togetherjs-tooltip {
    background-color: rgba(42,42,42,.9);
    color: #fff;
    border-radius: 4px;
    line-height:20px !important;
  }

  .togetherjs-dock-person-tooltip .togetherjs-person-name {
    font-size:12px;
  }

  .togetherjs-person-tooltip-arrow-r {
    position:absolute;
    left:46px;
  	width: 0;
  	height: 0;
  	border-top: 4px solid transparent;
  	border-bottom: 4px solid transparent;
  	border-left: 4px solid rgba(0,0,0,0.9);
  	line-height:20px;
  	opacity:0.9;
  	top:20px;
  }

}

.togetherjs-triangle-up  {
	position: absolute;
  top: -15px;
  width: 13px;
  left: 50px;
}

.togetherjs-triangle-up img {
  width:12px;
  height:13px;
}

.togetherjs-rtc-dialog-btn {
  text-align:right;
}


#togetherjs-rtc-info section.togetherjs-buttons {
  text-align:right !important;
}

#togetherjs-rtc-info label {
  font-size: 12px !important;
  float: left !important;
  padding-top: 13px;
  padding-left: 30px;
}

#togetherjs-rtc-info input {
  margin-top:0px !important;
}


.togetherjs-chat-url-change {
  background: #f2f2f2;
  margin-top:0px !important;
}

.togetherjs-chat-join-item {
  background: #f2f2f2;
  margin-top:0px !important;
}

.togetherjs-chat-left-item {
  background: #f2f2f2;
  margin-top:0px !important;
}

.togetherjs-inline-text {
  margin-top:10px !important;
}

.togetherjs-chat-join-item .togetherjs-person{
  float: left;
  margin-bottom:0px !important;
  margin-top:0px;
}

.togetherjs-chat-left-item .togetherjs-person{
  float: left;
  margin-bottom:0px !important;
  margin-top:0px;
}

.togetherjs-chat-url-change .togetherjs-person{
  float: left;
  margin-bottom:0px !important;
  margin-top:0px;
}

.togetherjs-chat-join-item span.togetherjs-person-name{
  font-family:openSansRegular, Helvetica;
}

.togetherjs-chat-left-item span.togetherjs-person-name{
  font-family:openSansRegular, Helvetica;
}

.togetherjs-chat-url-change span.togetherjs-person-name{
  font-family:openSansRegular, Helvetica;
}

.togetherjs-clear {
  clear:both;
}


/* Menu */
#togetherjs-menu {
  @icon-size: 12px;
  width:216px;
  position: fixed;
  font-size: 14px;
  background-color: #fff;
  z-index: @z-index + 3;
  border: 1px solid #979797;
  border-radius: 4px;
  hr {
    margin:0px;
    border-top: 0px solid #E1E1E1;
  }
  .togetherjs-menu-hr-avatar{
    margin-top:20px;
    height: 0px;
    border-bottom: 1px solid #E1E1E1;
    font-size: 1px;
  }
  .togetherjs-hr {
    height: 0px;
    margin: 0px;
    border-bottom: 1px solid #E1E1E1;
    font-size: 1px;
  }
  .togetherjs-menu-item {
    margin:-1px 0px -1px;
    padding: 12px;
    line-height:9px;
    height:10px;
    clear:both;
    cursor: pointer;
    &.togetherjs-menu-disabled {
      cursor: default;
      &:hover {
        background-color: inherit;
        border-radius:4px;
        border-top:1px solid #979797;
        padding-top:11px !important;
      }
    }
    img {
      float:left;
      height: (@icon-size)+8;
      width: (@icon-size)+8;
      margin-right: 10px;
      margin-top:-5px;
    }
    &:hover {
      background-color: rgba(216,216,216,0.5);
    }
    & .togetherjs-avatar {
      height: (@icon-size)+8;
      width: (@icon-size)+8;
      padding: 0;
      margin: 0 10px 0 0;
    }
    & .togetherjs-person-bgcolor-self {
      display: inline-block;
      width: @icon-size;
      height: @icon-size;
      border: 1px solid #999;
      border-radius: 2px;
      margin-right: 12px;
      float:left;
      margin-top:-2px;
      margin-left:4px;
    }
  }

  #togetherjs-menu-help {
    padding-left:15px;
  }

  #togetherjs-menu-feedback {
    padding-left:15px;
  }

  img#togetherjs-menu-avatar {
    float:left;
    padding-top:8px;
  }

  .togetherjs-person-name-self {
    padding-top:8px;
    line-height:32px;
    font-weight:bold;
  }

  .togetherjs-self-name {
    width:146px !important;
    float:right;
    margin-top:-23px;
    font-size: 12px;
    padding: 7px 7px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
    margin: -2px 0px;
    &:focus {
      border:1px solid #0095DD;
    }
  }

  .togetherjs-self-name:focus {
    border-bottom: 1px solid #0095DD;
  }

}

/*Participant windows*/

// multiple participants

#togetherjs-participantlist.togetherjs-window {
  padding: -1px;
}

#togetherjs-participantlist.togetherjs-window section {
  overflow: scroll;
  height: 200px;
  margin: 0px -7px;
}

#togetherjs-participantlist section.togetherjs-buttons {
  height: auto;
  background: none;
  text-align: left;
  margin: auto;
  padding-top: 0px;
}

#togetherjs-participantlist .togetherjs-person.togetherjs-person-small {
  margin: 0px;
  width: 30px;
  height: 30px;
}

#togetherjs-participantlist.togetherjs-window section ul li {
  padding: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

#togetherjs-participantlist.togetherjs-window img {

}

#togetherjs-participantlist.togetherjs-window .tj-name {
  padding-left: 5px;
}

#togetherjs-participantlist.togetherjs-window .tj-status {
  float: right;
  margin-top: 6px;
  margin-right: 10px;
  font-size: 24px;
  color: green;
}

#togetherjs-participantlist.togetherjs-window .tj-urllocation {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#togetherjs-participantlist .togetherjs-follow-question {
  margin-left: 0px;
}

#togetherjs-participantlist.togetherjs-window .tj-follow {
  font-size: 12px;
}

#togetherjs-participantlist.togetherjs-window .tj-btn-sm {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  margin: 0px 3px 0px 0px;
}


//

section.togetherjs-participant-window-main {
  margin:0px -7px -7px !important;
}

.togetherjs-participant-window-row a.togetherjs-person-url {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 179px;
  display: inline-block;
}

.togetherjs p.togetherjs-participant-window-row {
  border-bottom:1px solid #E1E1E1 !important;
  padding:7px 14px 14px !important
}

.togetherjs-participant-window-row strong {
  font-weight:800;
}

.togetherjs-follow-question {
  margin-left: 10px;
}

.togetherjs-float-left {
  float: left;
}

.togetherjs-window {
	input[type="radio"], input[type="checkbox"] {
  		margin: 0 0 0 !important;
	}
}

.togetherjs-clear {
  clear: both;
  margin: 10px;
}

section.togetherjs-buttons {
  background: #F3F2F2;
  margin: 0px -7px !important;
  padding: 7px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: right;
}

section.togetherjs-buttons.togetherjs-buttons-notification-diff-url {
  margin: 7px -7px 0px !important;
  padding: 7px 3px 0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 300px;
  text-align: right;
}

.togetherjs-notification-diff-url {
  width: 288px !important;
  margin: 0px 7px !important;
}


.togetherjs-different-url button {
  min-width:47% !important;
}

/*.togetherjs-different-url {
  text-align:right;
}*/

.togetherjs-same-url {
  padding-left: 7px !important;
  opacity:.5 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

section.togetherjs-buttons .togetherjs-same-url {
  text-align: left;
}



/* Button set */
#togetherjs-dock {
  position: fixed;
  z-index: @z-index;
  background-color: @background-color;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  @border-radius: 4px;
  @long-side: (@button-size + 9px) * 4 + 64px; // actual button-size * number of buttons + expand thingy
  @short-side: @button-size + 20px;
  /*border:1px solid #000;*/

  &.togetherjs-dock-right {
    padding: 0;
    bottom: 150px;
    right: 5px;
    border-radius: @border-radius;
    height: @long-side;
    width: @short-side;
    #togetherjs-dock-anchor-vertical {
      display: none;
    }
    #togetherjs-dock-anchor-horizontal {
      display: inline;
    }

    #togetherjs-dock-anchor-horizontal img {
      width:31px;
      height:7px;
      padding:0px 2px 2px 2px;
      pointer-events: none;
    }
  }

  &.togetherjs-dock-left {
    padding: 0;
    bottom: 60px;
    left: 5px;
    border-radius: 0 @border-radius @border-radius 0;
    height: @long-side - 46px;
    width: @short-side;
    #togetherjs-dock-anchor-vertical {
      display: none;
    }
    #togetherjs-dock-anchor-horizontal {
      display: inline;
    }

    #togetherjs-dock-anchor-horizontal img {
      width: 6px;
      height: 6px;
      padding: 7px 2px 2px 2px
    }
  }

  &.togetherjs-dock-top {
    padding: 0;
    top: 40px;
    left: 50%;
    margin-left: -(@long-side / 2);
    border-radius: @border-radius @border-radius 0 0;
    height: @short-side;
    width: @long-side;
    #togetherjs-buttons, #togetherjs-dock-anchor {
      display: inline;
    }
    #togetherjs-dock-anchor-vertical {
      display: inline;
    }
    #togetherjs-dock-anchor-horizontal {
      display: none;
    }
    #togetherjs-dock-anchor-vertical img {
      width: 6px;
      height: 6px;
      padding: 2px;
    }
  }
}

/* Arrows for pointing */

.togetherjs-arrow {
  position: absolute;
  border: 2px solid #f00;
  z-index: @z-index + 10;
  padding: 0;
  margin: 0;
  .transform-origin(top left);
}

.togetherjs-chat-message.togetherjs-arrow-message {
  border: 2px solid #f00;
}

/* Shared cursors */

.togetherjs-cursor svg {
  -webkit-filter: drop-shadow(1px 3px 2px rgba(0,0,0,0.3));
  -webkit-transform: rotate(-10deg);
}

.togetherjs-cursor-img {
  position: relative;
  top: 0;
}

.togetherjs-cursor img {
  width: 20px;
  -webkit-filter: drop-shadow( 0px 2px 1px rgba(0,0,0,0.2) );
  /*FIX ME, moz filter not working...*/
  -moz-filter: drop-shadow( 0px 2px 1px rgba(0,0,0,0.2) );
          filter: drop-shadow( 0px 2px 1px rgba(0,0,0,0.2) );
}

.togetherjs-cursor {
  position: absolute;
  z-index: @z-index - 1;
  font-size: 28px;
  font-weight: bolder;
  /* This magic CSS rule makes this element basically invisible to clicks/etc:
  (good on all but IE: http://caniuse.com/pointer-events */
  pointer-events: none;
  &:hover{
    cursor:pointer;
  }

  /*FIXME: maybe these should use position: fixed so the cursor
  stays stuck to the top of the screen until the appropriate time
  (when .togetherjs-scrolled-above/below is removed)?*/
  &.togetherjs-scrolled-above {
    position: fixed;
    svg {
      -webkit-transition-duration: 0.8s;
      -webkit-transition-property: -webkit-transform;
      -webkit-transform: rotate(20deg);
      transition-duration: 0.8s;
      transition-property: transform;
      transform: rotate(20deg);
    }
    .togetherjs-cursor-down {
      display: none;
    }
  }

  &.togetherjs-scrolled-below {
    position: fixed;
    svg {
      -webkit-transition-duration: 0.8s;
      -webkit-transition-property: -webkit-transform;
      -webkit-transform: rotate(-150deg);
      transition-duration: 0.8s;
      transition-property: transform;
      transform: rotate(-150deg);
    }
    .togetherjs-cursor-up {
      display: none;
    }
  }

  &.togetherjs-scrolled-normal {
    svg {
      -webkit-transition-duration: 0.8s;
      -webkit-transition-property: -webkit-transform;
      -webkit-transform: rotate(-10deg);
      transition-duration: 0.8s;
      transition-property: transform;
      transform: rotate(-10deg);
    }
    .togetherjs-cursor-up, .togetherjs-cursor-down {
      display: none;
    }
  }

  .togetherjs-cursor-container {
    opacity:0.9;
    white-space: nowrap;
    font-family: @default-font;
    font-size: 40%;
    position: relative;
    top: 5px;
    left: 15px;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.2);
    -moz-box-shadow:    0px 2px 4px 0px rgba(0,0,0,0.50);
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
    box-shadow:         0px 2px 4px 0px rgba(0,0,0,0.50);
  }
}

@start-click: 10px;
@end-click: 40px;

.togetherjs-click {
  position: absolute;
  z-index: @z-index - 2;
  pointer-events: none;
  width: @start-click;
  height: @start-click;
  margin: (-@start-click/2) 0 0 (-@start-click/2);
  border-radius: @start-click/2;
  border: 3px solid rgba(288, 58, 41, 1);
  .transition(~"width 2s, height 2s, margin 2s, border 2s");

  // This class is immediately applied for the purpose of transitioning:
  &.togetherjs-clicking {
    width: @end-click;
    height: @end-click;
    margin: (-@end-click/2) 0 0 (-@end-click/2);
    border-radius: @end-click/2;
    border: 3px solid rgba(0, 0, 0, 0);
  }
}

#togetherjs-starter .togetherjs-running {
  background-color: #f00;
  color: #fff;
  border-radius: 4px;
  border: 3px outset #d00;
  /*FIXME: add gradient*/
}

/* Modals */

#togetherjs-modal-background {
  position: fixed;
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: @z-index + 2;
}

.togetherjs {

  .togetherjs-modal {
    .togetherjs.togetherjs-window;
    @height: 20em;
    @width: 300px;
    border-radius:5px !important;
    position: fixed;
    z-index: @z-index+3;
    top: 50%;
    left: 50%;
    margin-left: -(@width/2);
    width: @width;
    margin-top: -(@height/2);
    &.togetherjs-modal-wide {
      width: 550px;
      margin-left: -284px;
      height: 530px;
      // FIXME: Why isn't -35% the right number?
      // I can't for the life of me figure out why 20% is right
      margin-top: -(550px / 2);
    }
  }

  .togetherjs-modal {
    section.togetherjs-buttons {
      /*position: absolute;*/
      bottom: 0;
      background: #F2F2F2;
      width: 294px;
      padding: 10px;
      text-align: right;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
      margin-left: -7px;
      margin-bottom: 0px;
      border-top:1px solid #E1E1E1;
    }
  }
  .togetherjs-modal-wide section.togetherjs-buttons {
    width: 544px;
    text-align: center !important;
    position: absolute;
  }

  .togetherjs-walkthrough-slide {
    padding: 0 30px 0 30px;
    text-align:center;
  }

  .togetherjs-walkthrough-slide p {
    margin:18px auto;
    width:400px;
  }

  .togetherjs-walkthrough-slide iframe {
    border-radius:4px;
  }

  section.togetherjs-walkthrough-slide .togetherjs-walkthrough-main-image .togetherjs-walkthrough-avatar-section {
    margin-top:115px;
  }

  .togetherjs-avatar-preview {
    float:left;
    margin-left:82px;
  }

  .togetherjs-avatar-upload-input {
    float:right;
    margin-right:82px;
    margin-top:19px;
  }

  .togetherjs-save-settings {
    margin-top:239px;
  }

  section.togetherjs-walkthrough-slide .togetherjs-walkthrough-avatar {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 44%;
    top: 30%;
    border-radius: 4px 4px 4px 4px;
    border: 2px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
    &:hover {
      cursor:pointer;
      border: 2px solid rgb(204, 204, 204, 0.2);
    }
  }

  section.togetherjs-walkthrough-slide input.togetherjs-self-name {
    position: absolute;
    top: 50%;
    left: 29%;
    font-size: 14px;
    padding: 6px 6px 6px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgb(204, 204, 204);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
    font-family: openSansRegular, Helvetica, sans-serif;
    margin: -20px 0px;
  }

  section.togetherjs-walkthrough-slide .togetherjs-swatch {
    width: 32px;
    height: 32px;
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
    position: absolute;
    top: 46.2%;
    right: 29%;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgb(204, 204, 204);
    &:hover {
      cursor:pointer;
      border: 1px solid rgba(204, 204, 204,0.2);
    }
  }

  section.togetherjs-walkthrough-slide span.togetherjs-walkthrough-sendlink {
    top: 44%;
    position: relative;
  }

  section.togetherjs-walkthrough-slide input.togetherjs-share-link {
    top: 44%;
    position: relative;
  }

  .togetherjs-walkthrough-main-image {
    width:400px;
    height:300px;
    background:rgba(216,216,216,0.1);
    border-radius:4px;
    border:1px solid rgba(151,151,151,0.1);
    margin:0 auto;
  }

  .togetherjs-walkthrough-main-image img {
    width:400px;
    height:300px;
  }

  .togetherjs-walkthrough-arrow() {
    cursor: pointer;
    width:19px;
    height:36px;
    background-repeat:no-repeat;
    background-size:60% 60%;
    margin-right:28px;
    margin-top:28%;
    &.togetherjs-disabled {
      cursor: default;
      opacity: 0.2;
    }
  }

  .togetherjs-walkthrough-arrow-l() {
    cursor: pointer;
    width:19px;
    height:36px;
    background-repeat:no-repeat;
    background-size:60% 60%;
    margin-left:36px;
    margin-top:28%;
    &.togetherjs-disabled {
      cursor: default;
      opacity: 0.2;
    }
  }

  #togetherjs-walkthrough input, textarea, .uneditable-input {
    width: 177px;
  }

  #togetherjs-walkthrough select, input[type="file"] {
    height: 30px;
    line-height: 0px;
  }

  #togetherjs-walkthrough-previous {
    .togetherjs-walkthrough-arrow-l;
    background-image: url('./images/icn-walkthrough-arrow-l.png');
    float:left;
    &:hover {
      background-image: url('./images/icn-walkthrough-arrow-l-hover.png');
    }
  }

  #togetherjs-walkthrough-next {
    .togetherjs-walkthrough-arrow;
    background-image: url('./images/icn-walkthrough-arrow-r.png');
    float:right;
    &:hover {
      background-image: url('./images/icn-walkthrough-arrow-r-hover.png');
    }
  }

  #togetherjs-walkthrough-progress {
    width: 537px;
    position: absolute;
    bottom: 66px;
    text-align:center;
  }

  .togetherjs-walkthrough-slide-progress {
    cursor: pointer;
    padding: 0 5px 0 5px;
    color: #D8D8D8;
    font-size:20px;
    &.togetherjs-active {
      color: #9C9C9C;
    }
    &:hover {
      color: #9C9C9C;
    }
  }

}

/* Animations */

/* Inspired by https://github.com/daneden/animate.css */

@-webkit-keyframes togetherjs-pulse {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.1); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes togetherjs-pulse {
  0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.1); }
  100% { -moz-transform: scale(1); }
}
@-o-keyframes togetherjs-pulse {
  0% { -o-transform: scale(1); }
  50% { -o-transform: scale(1.1); }
  100% { -o-transform: scale(1); }
}
@keyframes togetherjs-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.togetherjs-pulse {
  -webkit-animation-name: togetherjs-pulse;
  -moz-animation-name: togetherjs-pulse;
  -o-animation-name: togetherjs-pulse;
  animation-name: togetherjs-pulse;
}
// Note: the 1s is also present in ui.js (ANIMATION_DURATION)
.togetherjs-animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes togetherjs-color-pulse {
  0% {box-shadow: none;}
  50% {box-shadow: inset 0 0 2px #0095dd;}
  100% {box-shadow: none;}
}
@-moz-keyframes togetherjs-color-pulse {
  0% {box-shadow: none;}
  50% {box-shadow: inset 0 0 2px #0095dd;}
  100% {box-shadow: none;}
}
@-o-keyframes togetherjs-color-pulse {
  0% {box-shadow: none;}
  50% {box-shadow: inset 0 0 2px #0095dd;}
  100% {box-shadow: none;}
}
@keyframes togetherjs-color-pulse {
  0% {box-shadow: none;}
  50% {box-shadow: inset 0 0 2px #0095dd;}
  100% {box-shadow: none;}
}
.togetherjs-color-pulse {
  -webkit-animation-name: togetherjs-color-pulse;
  -moz-animation-name: togetherjs-color-pulse;
  -o-animation-name: togetherjs-color-pulse;
  animation-name: togetherjs-color-pulse;
}

@-webkit-keyframes togetherjs-color-alert {
  0% {box-shadow: none;}
  50% {box-shadow: 0 0 5px #0095dd;}
  100% {box-shadow: none;}
}
@-moz-keyframes togetherjs-color-alert {
  0% {box-shadow: none;}
  50% {box-shadow: 0 0 5px #0095dd;}
  100% {box-shadow: none;}
}
@-o-keyframes togetherjs-color-alert {
  0% {box-shadow: none;}
  50% {box-shadow: 0 0 5px #0095dd;}
  100% {box-shadow: none;}
}
@keyframes togetherjs-color-alert {
  0% {box-shadow: none;}
  50% {box-shadow: 0 0 5px #0095dd;}
  100% {box-shadow: none;}
}
.togetherjs-color-alert {
  -webkit-animation-name: togetherjs-color-alert;
  -moz-animation-name: togetherjs-color-alert;
  -o-animation-name: togetherjs-color-alert;
  animation-name: togetherjs-color-alert;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

#togetherjs-profile-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 42px;
  top: 46px;
  background: url('./images/icn-gear.png');
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

#togetherjs-pick-color {
  width: 100px;
  height: 76px;
  margin-left: -35px;
  position: absolute;
  margin-top:25px;
  background-color: #fff;
  z-index: @z-index + 4;
  // FIXME: shouldn't be one-off like this:
  border: 1px solid #979797;
  border-radius: 4px;
  padding: 5px;
  .togetherjs-swatch {
    cursor: pointer;
    display: inline-block;
    height: 12px;
    width: 12px;
    border: 1px solid;
    border-radius: 1px;
    margin: 4px;
    // Border and background color gets set dynamically
    &.togetherjs-swatch-active {
      border: 3px solid;
      border-radius: 3px;
    }
    &:hover {
      border: 2px solid rgba(0,0,0,0.5);
      // Adjusting down the size, so that the total size (height or
      // width + border) is the same as the non-hover swatch:
      height: 10px;
      width: 10px;
      border-radius: 3px;
    }
  }
}

.togetherjs-focus {
  position: absolute;
  pointer-events: none;
  z-index: @z-index - 1;
  opacity: 0.4;
  border: 3px solid;
  margin: -3px; // border should be outside the specified box
}

.togetherjs-only-mobile {
  display: none;
}

@media screen and (max-device-width: 480px) {
  @import "mobile.less";
}

/* We set this class on the <body> element when that last media query won't work
   but we detect in Javascript that the client should be treated as mobile */
.togetherjs-mobile-browser {
  @import "mobile.less";
}
